<template>
    <!-- 闪兑 -->
    <div class="exchange">
        <backHeader title="闪兑" backPath="/home">
            <template #right>
                <van-icon class="exchange-icon" @click="$router.push('/exchange/exchangeHistory')" name="clock-o" />
            </template>
        </backHeader>
        <van-form class="exchange-form">
            <p class="font-30 font-600 px-32 my-20">从</p>
            <van-field v-model="value1" type="number" placeholder="请输入金额" input-align="right" :rules="[{ required: true, message: '请输入金额' }]" error-message-align="right" @input="setValue">
                <div slot="left-icon" class="exchange-button" @click="openCurrency(0)">
                    <span>{{ value1Data.symbol ? value1Data.symbol.toLocaleUpperCase() : 'USDT' }}</span><van-icon name="arrow" />
                </div>
            </van-field>
            <div class="font-28 font-600 px-32 mb-20 flex justify-between">
                <p>至</p>
                <figure class="flex items-center" @click="exchangeSymbol"><img class="exchange-img" src="@/assets/image/exchange/exchange.png"></figure>
            </div>
            <van-field v-model="value2" type="number" placeholder="请输入金额" input-align="right" :rules="[{ required: true, message: '请输入金额' }]" error-message-align="right" readonly>
                <div slot="left-icon" class="exchange-button" @click="openCurrency(1)">
                    <span>{{ value2Data.symbol ? value2Data.symbol.toLocaleUpperCase() : 'BTC' }}</span><van-icon name="arrow" />
                </div>
            </van-field>
            <button class="form-button" @click="openConfirmPop">兑换</button>
            <div class="flex items-center justify-between px-32 font-30 font-600">
                <p>可用:</p>
                <p>{{ value1Data.usable }} {{ value1Data.symbol && value1Data.symbol.toLocaleUpperCase() }}</p>
            </div>
        </van-form>
        <van-popup v-model="currencyShow" position="bottom" closeable round class="currency-pop">
            <currencyPop :currencyList="currencyList" @getCurrency="getCurrency"/>
        </van-popup>
        <van-popup v-model="confirmShow" position="bottom" closeable round :close-on-click-overlay="false" class="confirm-pop">
            <confirmPop :form="form" @closePop="(val)=>confirmShow = val" v-if="confirmShow"/>
        </van-popup>
    </div>
</template>

<script>
import backHeader from '@/components/backHeader/index.vue';
import { Field, Form, Popup } from 'vant';
import { _getAllWallet, _exchangeRage, _initExchange } from "@/API/fund.api";
import currencyPop from './currencyPop.vue';
import confirmPop from './confirmPop.vue';
import { debounce } from '@/utils/utis';
export default {
    components:{
        backHeader,
        [Field.name]:Field,
        [Form.name]:Form,
        [Popup.name]:Popup,
        currencyPop,
        confirmPop,
    },
    data() {
        return {
            value1:'',
            value1Data:'',
            value2Data:'',
            currentIndex:0,
            currencyShow:false,
            currencyList:[],
            rate:0,
            confirmShow:false,
            form:{},
            session_token:'',
        }
    },
    mounted() {
        this.getSessionToken();
        this.getCurrencyList();
    },
    computed:{
        value2:{
            get(){
                if(this.value1){
                    return (this.value1 * this.rate).toFixed(5); 
                }else{
                    return 0;
                }
            },
            set(val){
                return val;
            }
        }
    },
    methods: {
        getSessionToken() { // 获取凭证
            _initExchange().then(data => {
                const { session_token } = data
                this.session_token = session_token
            })
        },
        getCurrencyList(){
            _getAllWallet().then(res=>{
                //usdt btc eth 放在前面
                const head = ['eth','btc','usdt'];
                this.currencyList = res.extends.sort((a,b)=>{ 
                    if(head.includes(a.symbol)){
                        return -1
                    }else{
                        return 1
                    }
                })
                this.value1Data = this.currencyList.find((item)=>item.symbol === 'usdt');
                this.value2Data = this.currencyList.find((item)=>item.symbol === 'btc');
                this.getRate();
            })
        },
        getCurrency(data){
            if(this.currentIndex){
                this.value2Data = data;
            }else{
                this.value1Data = data;
            }
            this.clearValue();
            this.getRate();
            this.currencyShow = false;
        },
        openCurrency(index){
            this.currentIndex = index;
            this.currencyShow = true;
        },
        exchangeSymbol(){
            [this.value1Data,this.value2Data] = [this.value2Data,this.value1Data];
            this.clearValue();
            this.getRate();
        },
        getRate(){
            const form = {
                symbol:this.value1Data.symbol.toLocaleUpperCase(),
                symbol_to:this.value2Data.symbol.toLocaleUpperCase(),
            }
            _exchangeRage(form).then(res=>{
                this.rate = res.get_rate;
            })
        },
        setValue: debounce(function () {
            if(this.value1 <= 0){
                this.$toast(this.$t('交易价格不能小于等于0'))
            }else{
                this.getRate();
            }
        }, 800),
        clearValue(){
            this.value1 = '';
            this.value2 = '';
        },
        openConfirmPop(){
            if(this.value1 <= 0){
                this.$toast(this.$t('交易价格不能小于等于0'));
                return;
            }
            if(!this.value1){
                this.$toast(this.$t('请输入金额'));
                return;
            }

            this.form = {
                rate:this.rate,
                symbol:this.value1Data.symbol.toLocaleUpperCase(),
                symbol_to:this.value2Data.symbol.toLocaleUpperCase(),
                volume:this.value1,
                session_token:this.session_token,
            }
            this.confirmShow = true;
        }
    },
}
</script>

<style lang="scss" scoped>
.exchange{
    padding: 0 32px;
    padding-bottom: 0 !important;
    background-color: #FAFAFA;
    height: 100%;
    ::v-deep .exchange-form{
        margin-top: 30px;
        padding: 32px;
        box-sizing: border-box;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1);
        border-radius: 40px;
        min-height: 700px;
        background-color: #fff;
        .van-field--error{
            overflow: visible !important;
        }
        .van-field{
            border: 1px solid #DADADA;
            border-radius: 44px;
            padding: 10px 20px 10px 10px;
            height: 95px;
            margin-bottom: 42px;
            &::before{
                display: none;
            }
            .van-field__body{
                height: 100%;
                .van-field__control{
                    font-weight: 700;
                    color: #606266;
                    &::placeholder{
                        color: #C0C4CC;
                    }
                }
            }
            .van-field__error-message{
                margin-top: 2px;
            }
        }
        .exchange-button{
            height: 70px;
            width: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #000;
            color: #fff;
            border-radius: 36px;
            font-size: 30px;
            display: flex;
            gap: 8px;
            align-items: center;
            padding: 0 20px;
            box-sizing: border-box;
            .van-icon{
                font-size: 24px;
                margin-left: 6px;
            }
        }
        .exchange-img{
            width: 40px;
            height: 40px;
        }
        .form-button{
            width: 100%;
            height: 84px;
            background-color: #000;
            color: #fff;
            border: 0;
            border-radius: 42px;
            font-size: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            margin-top: 80px;
            margin-bottom: 32px;
        }
    }
    ::v-deep .currency-pop{
        height: 50%;
    }
    ::v-deep .confirm-pop{
        height: fit-content;
        min-height: 50%;
    }
    ::v-deep .currency-pop,::v-deep .confirm-pop{
        width: 100%;
        padding: 32px;
        box-sizing: border-box;
        background-color: #fff;
        .van-icon{
            color: #000;
        }
    }
    .exchange-icon{
        font-size: 36px;
        line-height: 36px;
    }
}
</style>